<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>器材租借页面</title>
    <link rel="stylesheet" type="text/css"  th:href="@{/css/component.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/css/admin.css}"/>
    <!-- Bootstrap Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/bootstrap.css}"/>
    <!-- FontAwesome Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/font-awesome.css}"/>
    <!-- Morris Chart Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/morris-0.4.3.min.css}"/>
    <!-- Custom Styles-->
    <link rel="stylesheet" type="text/css"  th:href="@{/css/text/custom-styles.css}"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script th:src="@{./js/JQuery2.1.4.js}"></script>

    <!-- 富文本编辑器 -->
    <script type="text/javascript">
        var loadImageFile = (function() {
            if (window.FileReader) {
                var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
                oFReader.onload = function(oFREvent) {
                    if (!oPreviewImg) {
                        var newPreview = document.getElementById("imagePreview");
                        oPreviewImg = new Image();
                        oPreviewImg.style.width = (newPreview.offsetWidth)
                                .toString()
                            + "px";
                        oPreviewImg.style.height = (newPreview.offsetHeight)
                                .toString()
                            + "px";
                        if(newPreview.childNodes.length != 0){
                            newPreview.removeChild(document.getElementById("imgid"));
                        }
                        newPreview.appendChild(oPreviewImg);
                    }
                    oPreviewImg.src = oFREvent.target.result;
                };
                return function() {
                    var aFiles = document.getElementById("imageInput").files;
                    if (aFiles.length === 0) {
                        return;
                    }
                    if (!rFilter.test(aFiles[0].type)) {
                        alert("You must select a valid image file!");
                        return;
                    }
                    oFReader.readAsDataURL(aFiles[0]);
                }
            }
            if (navigator.appName === "Microsoft Internet Explorer") {
                return function() {
                    alert(document.getElementById("imageInput").value);
                    document.getElementById("imagePreview").filters
                        .item("DXImageTransform.Microsoft.AlphaImageLoader").src = document
                        .getElementById("imageInput").value;
                }
            }
        })();
    </script>
    <style type="text/css">
        #imagePreview {
            width: 160px;
            height: 120px;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale
            );
        }
    </style>
    <script src="./js/wang.js"></script>
</head>

<body>
<div class="rbody" id="app">
    <div class="top">
        当前位置：后台<i class="fa fa-fw fa-angle-right"></i>租借表
    </div>
    <div class="main">      <!--主页面-->
        <div class="equip">
            <form id="rentForm" th:action="@{insertRentOrder}" method="post">
                <div class="col-xs-10 col-sm-8" style="margin-left: 300px">
                    <p class="pull-right visible-xs">
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
                    </p>
                    <div class="jumbotron">
                        <h1 style="font-size:20px;margin-left: 300px">租借登记</h1>
                        <p style="font-size:15px;margin-left: 300px">
                            器材名称
                            <input type="text" required="required"  name="etypename" th:value="${etypename}" >
                        </p >
                        <!--<p style="font-size:15px">
                            器材类型
                            <input type="text" required="required"  name="etypeid" th:value="${etypeid}" >
                        </p >-->
                        <p style="font-size:15px;margin-left: 300px">租借人
                            <input type="text"  name="userName" required="required" th:value="${session.user.getUserName()}" >
                        </p>
                        <p style="font-size:15px;margin-left: 300px">学号/教工号
                            <input type="text" name="uid"  required="required" th:value="${session.user.getNumber()}" >
                        </p>
                        <p style="font-size:15px;margin-left: 300px"  th:if="${session.permission}=='2'">赛事编号
                            <input type="text" name="eventid"  required="required" th:value="${eventid}" >
                        </p>
                        <p id="imagePreview" style="margin-left: 300px">
                            <img id="imgid" th:src="@{/static/}+${equippic}" width="150" height="150" />
                        </p>
                        <button style="margin-left: 300px" type="submit" class="btn btn-primary" >租借</button>
                    </div>
                </div>
            </form>
        </div><!--/row-->
    </div>

</div>
<script src="./js/common.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/assets/js/ie10-viewport-bug-workaround.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.4/examples/offcanvas/offcanvas.js"></script>
</body>
<script type="text/javascript" th:src="@{/js/jquery/lib/jquery.js}"></script>
<script type="text/javascript" th:src="@{/js/jquery/dist/jquery.validate.js}"></script>
<script>
    $().ready(function() {
        $("#updateForm").validate({
            rules: {
                etypename: {
                    required: true,
                    maxlength: 32
                }
            },
            messages: {
                etypename: {
                    required: "请输入正确的器材名称",
                    maxlength: "器材名称不能超过32字符"
                }
            }
        });
    });
</script>
</html>